import { Tooltip, Input, Menu, Button } from 'antd';
import { QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import { TableDropdown } from '@ant-design/pro-table';
import { addParamsType, addSubject, delSubject } from '@/services/subject';
import { Link } from 'umi';

export const menu = (
  <Menu>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

const columnText = {
  id: {
    title: '序号',
    dataIndex: 'id',
  },
  ads_name: {
    title: '学科名称',
    dataIndex: 'ads_name',
  },
  created_at: {
    title: '创建时间',
    dataIndex: 'created_at',
  },
  ads_code: {
    title: '课程代码',
    dataIndex: 'ads_code',
  },
};

export const columns: (par: any) => ProColumns<request.SubjectType>[] = (param) => {
  return [
    {
      ...columnText.id,
      valueType: 'index',
      width: 48,
    },
    {
      ...columnText.ads_name,
      render: (_, item) => (
        <Link
          to={{
            pathname: 'list',
            state: {
              ads_id: item.id,
            },
          }}
        >
          {_}
        </Link>
      ),
      // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
      filterDropdown: () => (
        <div style={{ padding: 8 }}>
          <Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
        </div>
      ),
      filterIcon: (filtered) => (
        <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      ),
    },
    {
      title: (
        <>
          {columnText.created_at.title}
          <Tooltip placement="top" title="这是一段描述">
            <QuestionCircleOutlined style={{ marginLeft: 4 }} />
          </Tooltip>
        </>
      ),
      width: 140,
      key: 'since',
      valueType: 'date',
      dataIndex: columnText.created_at.dataIndex,
      sorter: (a, b) => a.createdAt - b.createdAt,
    },
    {
      ...columnText.ads_code,
      ellipsis: true,
      copyable: true,
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      fixed: 'right',
      render: (_, item) => [
        <Button danger key={item.id} onClick={() => {
          delSubject({ id: item.id + ',' })
          param()
        }}>删除</Button>,
      ],
    },
  ];
}

export const addPopConfig: addPopConfig<addParamsType> = {
  title: '添加新学科',
  subText: '添加学科',
  form: {
    ads_name: {
      type: 'text',
      label: '学科名',
      placeholder: '请输入学科名',
      rules: [
        {
          required: true,
          message: '请输入学科名！',
        },
      ],
    },
    ads_code: {
      type: 'text',
      label: '课程代码',
      placeholder: '请输入课程代码',
    },
    ads_img: {
      type: 'upload',
      label: '学科图片',
      rules: [
        {
          required: true,
          message: '请选择试卷图片'
        }
      ]
    },
  },
  validateMessage: {
    required: '必填项',
  },

  submitBind: addSubject,
}

